<template>
	<view style="width: 100vw;min-height: 100vh;padding: 20rpx;">
		<view class="" style="margin-bottom: 20rpx;">
			<view class="" style="font-weight: 600;padding: 20rpx;font-size: 38rpx;">
				交易成功
			</view>
			<view class="">
				<fui-steps activeColor="#FFDD00" size="26" :items="items" :current="current"></fui-steps>
			</view>
		</view>
		<view class="goods">
			<view class="goodsBox" @click="toGoodsDetails">
				<view class="flex">
					<view class="imgBox">
						<image src="../../static/test/userheader.jpg" mode="aspectFill"></image>
					</view>
					<view class="copywriting">
						啊收到了喀什觉得按时打卡是打开奥斯卡德拉克斯觉得啊啊啊啊啊
					</view>
					<view class="" style="color: #C4516E;width: 20%;">
						<text style="font-size:26rpx ;">￥</text><text>1</text>
					</view>
				</view>
			</view>
			<view class="price">
				<view class="flex-js">
					<view class="">
						成交价格
					</view>
					<view class="">
						￥10.00
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						商品总价
					</view>
					<view class="">
						￥10.00
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						运费
					</view>
					<view class="">
						￥0.00
					</view>
				</view>
			</view>
			<view class="" style="padding: 20rpx 0rpx;font-size: 28rpx;line-height: 45rpx;">
				<view class="flex-js">
					<view class="">
						订单编号
					</view>
					<view class="">
						33587485554693543285
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						收货地址
					</view>
					<view class="">
						宋佳伟 河北省保定市清苑区
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						买家昵称
					</view>
					<view class="">
						哈哈哈
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						下单时间
					</view>
					<view class="">
						2024/10/18
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						发货时间
					</view>
					<view class="">
						2024/10/18
					</view>
				</view>
				<view class="flex-js">
					<view class="">
						成交时间
					</view>
					<view class="">
						2024/10/20
					</view>
				</view>
			</view>
		</view>
		<view class="buyBox" :style="{'bottom':bottomHight+'rpx'}">
			<view class="money flex">
				<view class="btnBox">
					联系买家
				</view>
				<view class="btnBox" @click="toSend">
					发货
				</view>
			</view>
		</view>
		<uni-popup :mask-click="false" type="center" ref="SecurePrompt">
			<view class="formBox">
				<fui-form labelSize="26rpx" ref="form" labelWidth="180">
					<fui-form-item :padding='["30rpx",0]' bottomBorder label="核销单号:">
						<fui-input size="26" :borderBottom="false" :padding="[0]" placeholder="请输核销单号"></fui-input>
					</fui-form-item>
					<fui-form-item :padding='["30rpx",0]' bottomBorder label="取送类型:">
						<view class="" @click="show=true">
							{{formData.formText?`${formData.formText}`:"请选择取送类型"}}
						</view>
						<fui-picker linkage :layer="1" :options="options" title="请选择取送类型" :show="show" @change="change"
							@cancel="cancel"></fui-picker>
					</fui-form-item>
					<fui-form-item :padding='["30rpx",0]' bottomBorder label="取送地址:">
						<fui-input size="26" :borderBottom="false" :padding="[0]" placeholder="请输取送地址"></fui-input>
					</fui-form-item>
					<fui-form-item :padding='["30rpx",0]' bottomBorder label="是否付款:">
						<fui-radio-group name="radio" @change="checked">
							<view class="fui-list__item flex">
								<view class="fui-align__center">
									<fui-radio color="#FFDD00" value="1" :checked="gender==1"></fui-radio>
									<text class="fui-text">未付</text>
								</view>
								<view class="fui-align__center">
									<fui-radio color="#FFDD00" value="2" :checked="gender==2"></fui-radio>
									<text class="fui-text">已付</text>
								</view>
								<view class="fui-align__center">
									<fui-radio color="#FFDD00" value="3" :checked="gender==3"></fui-radio>
									<text class="fui-text">到付</text>
								</view>
							</view>
						</fui-radio-group>
					</fui-form-item>
					<fui-form-item :padding='["30rpx",0]' bottomBorder label="付款方式:">
						<fui-radio-group name="radio" @change="paymentChecked">
							<view class="fui-list__item flex">
								<view class="fui-align__center">
									<fui-radio color="#FFDD00" value="1" :checked="payment==1"></fui-radio>
									<text class="fui-text">微信</text>
								</view>
								<view class="fui-align__center">
									<fui-radio color="#FFDD00" value="2" :checked="payment==2"></fui-radio>
									<text class="fui-text">支付宝</text>
								</view>
							</view>
						</fui-radio-group>

					</fui-form-item>
					<fui-form-item :padding='["30rpx",0]' bottomBorder label="备注:">
						<fui-input size="26" :borderBottom="false" :padding="[0]" placeholder="请输备注"></fui-input>
					</fui-form-item>
				</fui-form>
				<view class="flex-js" style="padding: 20rpx;">
					<fui-button height="70rpx" type="warning" class="delBox" @click="toDelivery">取消</fui-button>
					<fui-button height="70rpx" type="primary" class="delBox" @click="toDelivery">确认发货</fui-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gender: 1,
				payment: 1,
				show: false,
				options: [{
					text: '送货',
					value: 1
				}, {
					text: '自取',
					value: 2
				}, {
					text: '邮递',
					value: 3
				}],
				formData: {},
				form: null,
				SecurePrompt: null,
				current: 0,
				items: [{
					title: '已拍下'
				}, {
					title: '已付款'
				}, {
					title: '已发货'
				}, {
					title: '交易成功'
				}],
				bottomHight: 0,
			};
		},
		mounted() {
			let app = uni.getSystemInfoSync()
			this.bottomHight = app.safeAreaInsets.bottom
			console.log('app', app);
		},
		methods: {
			toDelivery() {
				this.$refs.SecurePrompt.close()
			},
			checked(e) {
				this.gender = e.detail.value
			},

			paymentChecked(e) {
				this.payment = e.detail.value
			},
			change(e) {
				this.show = false
				this.formData.formText = e.text
				console.log(e)
			},
			cancel() {
				this.show = false
			},
			toSend() {
				this.$refs.SecurePrompt.open()
			},
			toGoodsDetails() {
				uni.navigateTo({
					url: '/publicPages/goods/details'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.delBox {
		width: 48%;
	}

	.fui-text {
		margin-left: 10rpx;
	}

	.formBox {
		padding: 20rpx;
		width: 90vw;
		border-radius: 20rpx;
		background-color: white;
	}

	.fui-align__center {
		margin-right: 20rpx;
		display: flex;
		align-items: center;
	}


	.price {
		line-height: 50rpx;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #F8F8F8;
		font-size: 28rpx;
	}


	.copywriting {
		font-size: 26rpx;
		padding: 0rpx 20rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;

		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 2;
	}

	.btnBox {
		font-size: 30rpx;
		margin-left: 20rpx;
		background-color: #F8F8F8;
		padding: 8rpx 25rpx;
		border-radius: 20rpx;
	}

	.goodsBox {
		margin-bottom: 20rpx;
		width: 100%;
	}

	.goods {
		border-radius: 25rpx;
		background-color: white;
		padding: 20rpx;
		width: 100%;
	}

	.imgBox {
		width: 150rpx;
		border-radius: 25rpx;

		image {
			border-radius: 25rpx;
			width: 150rpx;
			height: 150rpx;
		}
	}

	.money {
		justify-content: flex-end;
	}

	.buyBox {
		background-color: white;
		padding: 20rpx;
		position: fixed;
		left: 0;
		width: 100vw;

		.btn {
			padding: 20rpx 0rpx;
			color: white;
			font-weight: 600;
			justify-content: center;
			border-radius: 60rpx;
			background-color: #f9613e;
		}
	}
</style>